{extend name="public:_base" /}

    {block name="css"}

    <link rel="stylesheet" type="text/css" media="screen and (min-width: 1600px)" href="__STATIC__/hanbang/css/css.css">
    <link rel="stylesheet" type="text/css" media="screen and (min-width: 1380px) and (max-width: 1600px)" href="__STATIC__/hanbang/css/css1600.css">
    <link rel="stylesheet" type="text/css" media="screen and (min-width: 1024px) and (max-width: 1380px)" href="__STATIC__/hanbang/css/css1024.css">
    <link rel="stylesheet" type="text/css" media="screen and (max-width: 1000px)" href="__STATIC__/hanbang/css/cssmobile.css">
    <link rel="stylesheet" type="text/css" href="__STATIC__/hanbang/css/owl.carousel.css">
    <link rel="stylesheet" type="text/css" href="__STATIC__/hanbang/css/owl.theme.css">

    <script src="__STATIC__/hanbang/js/jquery.min.js"></script>
    <script src="__STATIC__/hanbang/js/jquery-ui.min.js "></script>
    <script src="__STATIC__/hanbang/js/jquery.fullPage.min.js"></script>
    <script src="__STATIC__/hanbang/js/js.js"></script>
    <script>
        $(function () {
            $.fn.fullpage({
                verticalCentered: false,
                anchors: ['page1', 'page2', 'page3', 'page4', 'page5', 'page6'],
                navigation: true,
                navigationTooltips: ['首页', '服务', '案例', '关于', '动态', '联系'],
                slidesNavigation: true,
                slidesNavPosition: "bottom",
                controlArrowColor: "#333",
                afterLoad: function (anchorLink, index) {
                    if (index == 1) {
                        $(".nav").hide();
                        $(".tongl2").hide();
                    }
                    if (index == 2) {
                        $(".tongl2").show();
                    }
                    if (index == 3) {
                        $(".tongl2").show();
                    }
                    if (index == 4) {
                        $(".tongl2").show();
                    }
                    if (index == 5) {
                        $(".tongl2").show();
                    }
                    if (index == 6) {
                        $(".tongl2").show();
                    }
                }
            });

            $(window).resize(function () {
                autoScrolling();
            });

            function autoScrolling() {
                var $ww = $(window).width();
                if ($ww < 1000) {
                    $.fn.fullpage.setAutoScrolling(false);
                    $('video').remove();
                    $('#video1').remove();
                    $(".nav").show();
                } else {
                    $.fn.fullpage.setAutoScrolling(true);
                    $(".section1").find(".bg").prepend("<img src='./images/bannar.jpg'>");
                    $(".nav").hide();
                }
            }

            autoScrolling();
        });
    </script>
{/block}

{block name="gundong"}{/block}

{block name="main"}
{$navs}
<!-- 第一部分 -->
<div class="section section1">

    <!-- 头部幻灯片视频 -->
    <div class="bg">
        <video id='video1'  src='__STATIC__/hanbang/images/video/bananar.mp4' poster='' loop='loop'  autoplay='autoplay' type='video/mp4' style='min-width:100%; min-height:100%;' ></video>
        <script> 
            var myVideo=document.getElementById("video1"); 
            myVideo.play();
        </script> 
    </div>
    <!-- #头部幻灯片视频 -->

    <!-- 滚动图上显示的图片 -->
    <div class="hgroup">
        <div class="indexDiv indexFlash fadeFlash">
            <ul>
                <li>
                    <img src="__STATIC__/hanbang/images/lb1.png">
                    <p></p>
                </li>
                <li>
                    <img src="__STATIC__/hanbang/images/lb1.png">
                    <p></p>
                </li>
                <li>
                    <img src="__STATIC__/hanbang/images/lb1.png">
                    <p></p>
                </li>
            </ul>
        </div>
    </div>
    <!-- #滚动图上显示的图片 -->

    <!-- 滚动图上的下一步箭头 -->
    <div class="scroll-button-wrapper">
        <a href="#page2"><span class="scroll-circle"></span></a>
    </div>
    <!-- # 滚动图上的下一步箭头 -->

</div>
<!-- # 第一部分 -->

<!-- 第二部分 -->
<div class="section section2">
    <!-- 背景图 -->
    <div class="bg"><img src="__STATIC__/hanbang/images/00.jpg" alt="网站建设"></div>
    <!-- # 背景图 -->
    <!-- A -->
    <div class="zhuti1">
        <div class="ztbg"></div>
        <div class="tb1"><img src="__STATIC__/hanbang/images/p2_1b.png"></div>
        <div class="tb"><img src="__STATIC__/hanbang/images/p2_1.png"></div>
        <div class="ztitle">网站建设</div>
        <div class="zms">
            <p>电商平台</p>
            <p>企业官网</p>
            <span>针对品牌、行业提供定制化网站建设解决方案<br/>各类电商平台系统、行业交易平台的定制开发</span>
        </div>
        <a class="zhuti1zi" id="zhuti1zi" style="font-size: 60px;">
            定<!--<img src="#"/>-->
        </a>
    </div>
    <!-- #A -->

    <!-- B -->
    <div class="zhuti2">
        <div class="ztbg"
             style="background:#67adde;  width:100%; height:100%;opacity:0.8;position:absolute; top:0px; left:0px;"></div>
        <div class="tb" style=" display:none;"><img src="__STATIC__/hanbang/images/p2_2.png"></div>
        <div class="tb1" style=" display: block;"><img src="__STATIC__/hanbang/images/p2_2b.png"></div>
        <div class="ztitle" style="color:#FFFFFF;">微站</div>
        <div class="zms">
            <p>微网站、微商城、小程序</p>
        </div>
        <a class="zhuti2zi" id="zhuti2zi" style="font-size: 60px;">制</a>
    </div>
    <!-- #B -->

    <!-- C -->
    <div class="zhuti3">
        <div class="ztbg"></div>
        <div class="tb1"><img src="__STATIC__/hanbang/images/p2_3b.png"></div>
        <div class="tb"><img src="__STATIC__/hanbang/images/p2_3.png"></div>
        <div class="ztitle">网络推广</div>
        <div class="zms">
            <p>SEO/SEM</p>
            <p>信息流广告</p>
            <p>网络营销策划</p>
        </div>
        <a class="zhuti3zi" id="zhuti3zi" style="font-size: 60px;">服</a>
    </div>
    <!-- # C -->

    <!-- D -->
    <div class="zhuti4">
        <div class="ztbg"
             style="background:#4dad33;  width:100%; height:100%;opacity:0.8;position:absolute; top:0px; left:0px;"></div>
        <div class="tb" style=" display:none;"><img src="__STATIC__/hanbang/images/p2_4.png"></div>
        <div class="tb1" style=" display: block;"><img src="__STATIC__/hanbang/images/p2_4b.png"></div>
        <div class="ztitle" style="color:#FFFFFF;">软件开发</div>
        <div class="zms">
            <p>微信二次开发</p>
            <p>软件定制开发</p>
        </div>
        <a class="zhuti4zi" id="zhuti4zi" style="font-size: 60px;">务</a>
    </div>
    <!-- D -->
</div>
<!-- #第二部分 -->

<!-- 第三部分 -->
<div class="section section3">

    <div class="bgbg" style="position:absolute;">
        <img src="__STATIC__/hanbang/images/bg4.jpg" style="width: 110%;height: 110%;">
    </div>

    <div class="casesbt">
        CASE网站案例
    </div>

    <div class="fadeInUp">


        <div id="owl-demo11" class="owl-carousel">

            <!-- 案例显示1 -->
            <div class="item">
                <ul class="og-grid">
                    {volist name="ucase" id="vo"}
                    <li>
                        <a href="{$vo.url}" target="_blank">
                            <div class="gridpic">
                                <figure class="effect-bubba">
                                    <img src="__ROOT__/uploads/{$vo.image ?'image/md_'.$vo.image: 'sm_nopic.jpg'}">
                                    <figcaption>
                                        <h2>{$vo.title}</h2>
                                        <p>{$vo.miaoshu}</p>
                                    </figcaption>
                                </figure>
                            </div>
                        </a>
                    </li>
                    {/volist}
                </ul>
            </div>
            <!-- #案例显示1 -->

        </div>

    </div>

</div>
<!-- # 第三部分 -->

<!-- 第四部分 -->
<div class="section section4">

    <div class="guanyu">

        <div class="hanbang1"><img src="__STATIC__/hanbang/images/hanbang1.png" height="500"></div>
        <div class="hanbang2"><img src="__STATIC__/hanbang/images/wosai-2.png" height="500"></div>
        <div class="hanbang3"><img src="__STATIC__/hanbang/images/wosai-3.png" height="500"></div>
        <div class="shoushi"><img src="__STATIC__/hanbang/images/shoushi1.png"></div>
        <div class="shoushi2"><img src="__STATIC__/hanbang/images/shoushi02.gif"></div>
        <div class="ipad"><img src="__STATIC__/hanbang/images/wosai-ipad.png"></div>
        <div class="shoushi3"><img src="__STATIC__/hanbang/images/shoushi1.png"></div>
        <div id="owl-demo" class="owl-carousel">
            <div class="item ipadwz">
                <p style="font-size: 40px;">沃噻未来</p>
                <p class="huangse">
                    品牌策划<br/>
                    项目路演<br/>
                    项目孵化<br/>
                    定制开发<br/>
                    网络推广
                </p>
                <p style="font-size: 24px;">互联网品牌整合营销专家的</p>
            </div>

            <div class="item ipadwz">
                <p>
                    <span class="hse">定制开发各种平台</span>、系统、B2B、B2C、B2B2C电商平台,分销系统,直销系统,一元购平台 ,招聘系统,P2P网贷系统等。
                </p>

                <p style="padding-top:30px;">
                    <span class="hse">跨平台,多终端,数据同步,</span>PC网站,手机网站、微站,APP等。
                </p>
            </div>

            <div class="item ipadwz">
                <p>
                    <span class="hse">沃噻针对有品牌意识的客户,</span> 提供系统的品牌行销策略, 创意执行,深度追踪运营。
                </p>

                <p style="padding-top:30px;">我们是中国互联网的中坚力量，愿意不断尝试,敢于创造……</p>
            </div>
        </div>

        <div class="aboutr">
            <div class="aboutright ab10"><span class="lvse">沃噻</span></div>
            <div class="aboutright1 ab11">一群有梦想有激情的</div>
            <div class="aboutright1 ab12">一家有技术实力的</div>
            <div class="aboutright1 ab13">一帮有创新创意理念的</div>
            <div class="aboutright1 ab14">一家有团队合作精神的</div>
            <div class="aboutright1 ab15">一个有超强服务意识的</div>
            <div class="aboutright1 ab16">年轻群体</div>
        </div>

    </div>

</div>
<!-- # 第四部分 -->

<!-- 第五部分 -->
<div class="section section5">

    <!-- 背景动画 -->
    <div class="bg">
        <img src="__STATIC__/hanbang/images/aaa.png"/>
    </div>

    <!-- 标题
    <div class="viewbt">案例展示</div>
    -->

    <div id="ib-container">
        <article class="grid_3">
            <div class="box maxheight">
                <div class="text1"><a href="#">官网</a></div>
                <div class="text2">
                    <a href="#">
                        量身定制属于自己的互联网品牌形象，设计符合访问者视觉体验和浏览习惯，完整的传达品牌信息及服务，让用户感受到品牌的实力和特色。致力于品牌形象设计（MI BI
                        VI）主张从品牌核心价值的角度导入品牌整体形象为品牌建立独具自我鲜明风格的品牌特质与识别
                    </a>
                </div>
            </div>
        </article>

        <article class="grid_3">
            <div class="box maxheight">
                <div class="text1"><a href="#">微站</a></div>
                <div class="text2">
                    <a href="#">
                        微官网、微商城、微互动、微会员、微预约……微信的二次开发，量身定制属于自己的微信公众号，为企业的品牌宣传、策划、运营、活动建立传播渠道。使用目前主流的HTML5+CSS3设计制作，可以同时兼容手机、ipad等触屏设备分辨率，达到最优访问效果
                        后台更新网站数据后立即同步各终端。
                    </a>
                </div>
            </div>
        </article>

        <article class="grid_3">
            <div class="box maxheight">
                <div class="text1" style=" line-height:40px;"><a href="#">签约</a></div>
                <div class="text2"><a href="#"></a></div>
            </div>
        </article>

        <article class="grid_3">
            <div class="box maxheight">
                <div class="text1"><a href="#">推广</a></div>
                <div class="text2">
                    <a href="#">
                        PC端+手机端+微信端，搜索引擎推广、关键词优化排名、网盟广告、新媒体推广……推广媒介：百度、360、搜狐、腾讯、微信、微博、陌陌、LinkedIn（领英）数据化分析消费者行为与习惯，有效定位消费者或受众人群，通过有效资源与内容为品牌建立多维度的投放与口碑维护，
                        帮助品牌实现投放效果最大化
                    </a>
                </div>
            </div>
        </article>

        <article class="grid_3">
            <div class="box maxheight">
                <div class="text1"><a href="#">开发</a></div>
                <div class="text2">
                    <a href="#">
                        为品牌树立差异化的品牌战略定位与品牌价值结合企业现状进行适合的品牌梳理找到最佳的品牌建设及品牌管理模式。提供IOS和Android不同系统进行开发，提供品牌专属APP界面UI设计，包括品牌宣传APP、
                    </a>
                </div>
            </div>
        </article>
    </div>

</div>
<!-- #第五部分 -->

<!-- 第六部分.底部 -->
<div class="section section6">

    <div class="ceng6">
        <div class="foot1" style="font-size: 40px;">全国统一服务热线:</div>
        <div class="foot4">
            <div><a href="tel:123456789">{$system.footaddress.value}</a></div>
        </div>
        <div class="foot5">
            {volist name="online" id="vo"}
            <a href="http://wpa.qq.com/msgrd?v=3&amp;uin={$vo.QQ}&amp;site=qq&amp;menu=yes"
               target="_blank">
                <img title="{$vo.name}" src="__STATIC__/hanbang/images/qq.jpg">
            </a>
            {/volist}
        </div>

        <div class="shouji"><img src="__STATIC__/hanbang/images/code.png"></div>

        <div class="foot9">
            <strong>友情链接：</strong>
            {volist name="link" id="vo"}
            <a href="{$vo.url}" target="_blank">{$vo.title}</a>
            {/volist}
        </div>

        <div class="footer">
            地址：{$system.footaddress.value}
        </div>

    </div>

    <div class="ppkh">
        <img src="__STATIC__/hanbang/images/foot-A.png">
    </div>

</div>
<!-- #第六部分.底部 -->

<!-- 移动版.首页 -->
<div class="mobile">
    <!-- 第一部分 -->
    <div class="section1">
        <div class="bg"></div>
        <div class="hei"></div>
        <div class="tongl2">
            <div class="logo"><img src="__STATIC__/hanbang/images/logo.png"/></div>
            <div class="navtop">
                <ul>
                    <li><a href="{:request()->root(true)}">首页</a></li>
                    {volist name="nav" id="vo" length="8"}
                    <li><a href="{eq name='vo.type' value='link'}{$vo.link}{else/}{:url('/index', [$vo['model'] => 'index', 'navid' => $vo['id']])}{/eq}">{$vo.name}</a></li>
                    {/volist}
                </ul>
            </div>
        </div>

        <div class="hgroup">
            <div class="indexDiv indexFlash fadeFlash">
                <ul>
                    <li><img src="__STATIC__/hanbang/images/lb1.png"></li>
                    <li><img src="__STATIC__/hanbang/images/lb1.png"></li>
                    <li><img src="__STATIC__/hanbang/images/lb1.png"></li>
                </ul>
            </div>
        </div>

        <div class="scroll-button-wrapper">
            <a href="#page2"><span class="scroll-circle"></span></a>
        </div>
    </div>
    <!-- # 第一部分 -->

    <!-- 第二部分 -->
    <div class="m_fuwu">
        <div class="m_fuwumk">
            <div class="fwpic">
                <img src="__STATIC__/hanbang/images/p2_1.png" alt="网站建设">
            </div>
            <p>电商平台</p>
            <p>企业官网</p>
        </div>

        <div class="m_fuwumk">
            <div class="fwpic">
                <img src="__STATIC__/hanbang/images/p2_2.png" alt="HTML5响应式">
            </div>
            <p>H5响应式</p>
            <p>兼容多终端</p>
        </div>

        <div class="m_fuwumk">
            <div class="fwpic">
                <img src="__STATIC__/hanbang/images/p2_3.png" alt="移动互联网应用">
            </div>
            <p>手机网站、微站</p>
            <p>APP、移动交互</p>
        </div>

        <div class="m_fuwumk">
            <div class="fwpic">
                <img src="__STATIC__/hanbang/images/p2_4.png" alt="互联网运维">
            </div>
            <p>网站运维</p>
            <p>安全运维</p>
        </div>
        <div class="clear"></div>
    </div>
    <!-- #第二部分 -->

    <!-- 第三部分 -->
    <div class="m_case">
        <div class="m_casetit" style="font-size: 24px;">CASE网站案例</div>
        <ul>
          {volist name="ucase" id="vo"}
            <li><a href="{$vo.url}" target="_blank"><img src="__ROOT__/uploads/{$vo.image ?'image/md_'.$vo.image: 'sm_nopic.jpg'}"></a>
                <p>{$vo.title}</p></li>
          {/volist}
            <li><a href="#" class="more"><img src="__STATIC__/hanbang/images/more.jpg"></a></li>
            <div class="clear"></div>
        </ul>

    </div>
    <!-- #第三部分 -->

    <!-- 第四部分 -->
    <div class="m_jieshao">
        <div class="jieshaobg">
            <p>
                <span>沃噻</span>定位为专业的互联网技术服务提供商，定制开发各种平台、系统,B2B、B2C、B2B2C、O2O电商平台、分销系统、直销系统、一元购平台、招聘系统、P2P网贷系统等。
            </p>

            <p>
                <br/><strong>我们不一定是最优秀的，但我们服务的都是最优秀的客户。</strong>
            </p>
        </div>
    </div>
    <!-- #第四部分 -->

    <!-- 第五部分 -->
    <div class="m_foot">
        <p class="tel"><a href="tel:{$system.advisory.value}">{$system.advisory.value}</a></p>
        <p class="tel1"><a href="{$system.foottel.value}">{$system.foottel.value}</a></p>
        <p class="f12">地址：{$system.footaddress.value}</p>
        <p class="f10">{$system.copyright.value}</p>
    </div>
    <!-- #第五部分 -->

    <div class="h60"></div>

    <!-- 底部 -->
    <div class="knav">
        <div class="tel"><a href="tel:{$system.advisory.value}">热线</a></div>
        <div class="about"><a href="#">关于</a></div>
        <div class="contact"><a href="#">案例</a></div>
        <div class="zxjl"><a href="#">在线</a></div>
    </div>
    <!-- #底部 -->
</div>
{/block}
{block name="js"}
<!-- Home.首页JS -->
<!-- 第二部分.文字跟住鼠标移动 -->
<script type="text/javascript">
    $('.section2').mousemove(function (ee) {
        var xx = ee.pageX;
        var yy = ee.pageY;

        $('#zhuti1zi').css("left", xx + "px");
        var width = $('.zhuti1').width();
        var xxw = xx - width;

        $('#zhuti2zi').css("left", xxw + "px");
        var xxw3 = xx - width * 2;
        $('#zhuti3zi').css("left", xxw3 + "px");
        var xxw4 = xx - width * 3;
        $('#zhuti4zi').css("left", xxw4 + "px");
    });

    $('.section3').mousemove(function (e) {
        var xx = e.pageX;
        var yy = e.pageY;
        var w = xx / 10;
        var h = yy / 10;
        $(this).find('.bgbg').css("left", -w + "px");
        $(this).find('.bgbg').css("top", -h + "px");
    });
</script>

<!-- 第三部分.左右案例图片滚动 -->
<script src="__STATIC__/hanbang/js/owl.carousel.js"></script>
<script>
    $(function () {
        $('#owl-demo').owlCarousel({
            items: 1,
        });
        $('#owl-demo11').owlCarousel({
            items: 1,
            navigation: true,
            navigationText: ["<div class='alleft'></div>", "<div class='alright'></div>"]
        });
        $('#owl-demo11').find('.owl-controls').find('.owl-pagination').hide();
    });
</script>

<!-- 第四部分.手指效果 -->
<script>
    $(function () {
        var $container = $('#ib-container'),
            $articles = $container.children('article'),
            timeout;
        $articles.on('mouseenter', function (event) {
            var $article = $(this);
            clearTimeout(timeout);
            timeout = setTimeout(function () {
                if ($article.hasClass('active'))
                    return false;
                $articles.not($article.removeClass('blur').addClass('active')).removeClass('active').addClass('blur');
            }, 65);
        });

        $container.on('mouseleave', function (event) {
            clearTimeout(timeout);
            $articles.removeClass('active blur');
        });
    });
</script>
<!-- #Home.首页JS -->
{/block}
{block name="foot"}{/block}
